<template>
	<div class="add_account">
		<van-cell title="类型" is-link :value="columns[state.form.type]" @click="showPicker = true" />
		<van-field v-model="state.form.username" label="账号姓名:" placeholder="请输入账号姓名" />
		<van-field v-model="state.form.account" label="账号:" placeholder="请输入账号" />
		<van-field v-model="state.form.bankname" label="银行:" placeholder="请输入银行" />

		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
		</van-popup>

		<div class="btn">
			<van-button type="primary" size="large" v-debounce="save">保存</van-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { addMyWithdrawalAccount, getMyWithdrawalAccount, editMyWithdrawalAccount } from '@/api/my';
import { useMainStore } from '@/store/index';
import type { PickerOption, ToastOptions } from 'vant';
import { Toast } from 'vant';

const route = useRoute();
const router = useRouter();
const mainStore = useMainStore();
const state = reactive<any>({
	id: route.query.id || null,
	form: {
		user_id: mainStore.user_id,
		username: '',
		account: '',
		type: 0
	}
});

onMounted(() => {
	if (state.id !== null) {
		getAccountInfo();
	}
});

const columns: string[] = ['银行卡'];
const showPicker = ref(false);

const save = async (): Promise<void | ToastOptions> => {
  if (typeof mainStore.userInfo.audit_state != 'undefined' && mainStore.userInfo.audit_state != 1) {
    if (mainStore.userInfo.audit_state == 0) return Toast('您的资料正在审核中');
    if (mainStore.userInfo.audit_state == 2) return Toast('您的资料审核未通过');
  } else {
    if ((!mainStore.userInfo?.identity || mainStore.userInfo?.identity == '0')) {
      router.push('/registered');
      return;
    }
  }
	if (!state.form.username.trim()) return Toast('请输入账号姓名');
	if (!state.form.account.trim()) return Toast('请输入账号');
	if (!state.form.bankname.trim()) return Toast('请输入银行');

	if (state.id == null) {
		await addMyWithdrawalAccount(state.form);
		Toast.success('添加成功');
	} else {
		state.form.id = state.id;
		await editMyWithdrawalAccount(state.form);
		Toast.success('修改成功');
	}
	setTimeout(() => {
		router.go(-1);
	}, 2000);
};

const onConfirm = (value: PickerOption | PickerOption[], currentIndex: number | number[]) => {
	state.form.type = currentIndex;
	showPicker.value = false;
};

const getAccountInfo = async () => {
	const res = await getMyWithdrawalAccount(mainStore.user_id, state.id);
	const { account, type, username } = res.data;
	Object.assign(state.form, { account, type, username });
};
</script>

<style lang="scss" scoped>
:deep(.van-cell--clickable) {
	.van-cell__title,
	.van-cell__value {
		font-size: 14px !important;
		font-weight: bold;
	}
}
:deep(.van-cell) {
	@include flx-align-center;
	height: 50px;
	padding: 0 15px;
	.van-cell__title,
	.van-cell__value {
		font-size: 12px;
	}
}
.add_account {
	.btn {
		@include flx-center;
		margin: 70px 0;
		button {
			height: 43px;
			width: 86%;
			border: none;
			border-radius: 22px;
			font-size: 16px;
			background: linear-gradient(267deg, #f53d7d, #fb56b3);
		}
	}
}
</style>
